/// <reference path="references.scss" />

//
// Mixins
// --------------------------------------------------

// @see http://getbootstrap.com/css/#forms-control-validation
// @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L388
@mixin validation-state-focus($color) {
    $shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($color, 20%);

    .select2-dropdown,
    .select2-selection {
        border-color: $color;
    }
}

.select2-container {
    --border-radius: #{$input-border-radius};
    --shadow-intensity: #{$dropdown-shadow-intensity};
    --select2-caret-width: calc(#{$input-height} - 2px);
    --select2-height: #{$input-height};
    --select2-line-height: #{$input-btn-line-height};
    --select2-padding-x: #{$input-btn-padding-x};
    --select2-padding-y: #{$input-btn-padding-y};
    --select2-font-size: #{$font-size-base};
    --select2-multiple-padding: 0.2em;
    --select2-choice-padding-x: #{$input-btn-padding-x / 2};
    --select2-choice-padding-y: 0;
    --select2-choice-line-height: 1.7;

    --select2-input-border-color: #{$input-border-color};
    --select2-input-border-focus-color: #{$gray-200};
    --select2-placeholder-color: #{$input-placeholder-color};

    --select2-drop-hover-bg: #{$dropdown-link-hover-bg};
    --select2-drop-hover-color: #{$dropdown-link-hover-color};
    --select2-drop-active-bg: #{$dropdown-link-hover-bg};
    --select2-drop-active-color: #{$dropdown-link-hover-color};
    --select2-drop-box-shadow: #{$dropdown-box-shadow};

    display: block;

    @import "_select2-common.scss";
    @import "_select2-single.scss";
    @import "_select2-multiple.scss";
    @import "_select2-drop.scss";
}


//
// Additional goodies
// --------------------------------------------------


/**
 * Address Bootstrap's validation states
 *
 * If a Select2 widget parent has one of Bootstrap's validation state modifier
 * classes, adjust Select2's border colors and focus states accordingly.
 * You may apply said classes to the Select2 dropdown (body > .select2-container)
 * via JavaScript match Bootstraps' to make its styles match.
 *
 * @see http://getbootstrap.com/css/#forms-control-validation
 */


/*select.is-valid + .select2:not(.select2-container--open) {
	@include validation-state-focus($form-feedback-valid-color);
}*/


/*.has-warning {
  @include validation-state-focus(theme-color-level("warning", 1));
}*/

select.is-invalid + .select2:not(.select2-container--open) {
    @include validation-state-focus($form-feedback-invalid-color);
}


/**
 * Select2 widgets in Bootstrap Input Groups
 *
 * When Select2 widgets are combined with other elements using Bootstraps
 * "Input Group" component, we don't want specific edges of the Select2
 * container to have a border-radius.
 *
 * Use .select2-bootstrap-prepend and .select2-bootstrap-append on
 * a Bootstrap 3 .input-group to let the contained Select2 widget know which
 * edges should not be rounded as they are directly followed by another element.
 *
 * @see http://getbootstrap.com/components/#input-groups
 */


/**
 * Mimick Bootstraps .input-group .form-control styles.
 *
 * @see https://github.com/twbs/bootstrap/blob/master/less/input-groups.less
 */

.input-group .select2-container--bootstrap {
    flex: 1 1 auto;
    width: 1%;
    z-index: 2;
    margin-bottom: 0;
    /**
   * Adjust z-index like Bootstrap does to show the focus-box-shadow
   * above appended buttons in .input-group and .form-group.
   */
    &.select2-container--open,
    &.select2-container--focus {
        z-index: 3;
    }
}

.input-group.select2-bootstrap-prepend .select2-container--bootstrap {
    .select2-selection {
        @include border-left-radius(0);
    }
}

.input-group.select2-bootstrap-append .select2-container--bootstrap {
    .select2-selection {
        @include border-right-radius(0);
    }
}


/**
 * Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address
 * Multi Select2's height which - depending on how many elements have been selected -
 * may grow taller than its initial size.
 *
 * @see http://getbootstrap.com/components/#input-groups
 */

.select2-bootstrap-append,
.select2-bootstrap-prepend {
    .select2-container--bootstrap,
    .input-group-btn,
    .input-group-btn .btn {
        vertical-align: top;
    }
}


/**
 * Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9
 *
 * Provides `!important` for certain properties of the class applied to the
 * original `<select>` element to hide it.
 *
 * @see https://github.com/select2/select2/pull/3301
 * @see https://github.com/fk/select2/commit/31830c7b32cb3d8e1b12d5b434dee40a6e753ada
 */

.form-control.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
}


/**
 * Display override for inline forms
 */

.form-inline .select2-container--bootstrap {
    display: inline-block;
}
